<template>
  <!-- 企业管理 -->
  <div class="filterContent">
    <a-form :model="filterForm" layout="inline">
      <a-form-item label="企业名称">
        <a-input
          v-model:value="filterForm.projectName"
          class="formInput"
          allow-clear
          placeholder="请输入"
        />
      </a-form-item>
      <a-form-item label="所在省份">
        <a-select
          ref="select"
          v-model:value="filterForm.provId"
          class="formInput"
          placeholder="省份"
          show-search
          optionFilterProp="label"
          @change="changeProv"
        >
          <a-select-option
            v-for="item in provList"
            :key="item.provId"
            :value="item.provId"
            :label="item.provName"
          >
            {{ item.provName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="所在城市">
        <a-select
          ref="select"
          v-model:value="filterForm.cityId"
          class="formInput"
          placeholder="城市"
          @change="changeCity"
          :disabled="!filterForm.provId"
        >
          <a-select-option
            v-for="item in cityList"
            :key="item.cityId"
            :value="item.cityId"
            :label="item.cityName"
          >
            {{ item.cityName }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="多期项目">
        <a-select
          ref="select"
          v-model:value="filterForm.isMulti"
          class="formInput"
          allow-clear
          placeholder="请选择"
        >
          <a-select-option :value="1">是</a-select-option>
          <a-select-option :value="0">否</a-select-option>
        </a-select>
      </a-form-item>
      <a-button type="primary" class="filterBtn" @click="getCompageList"
        >查询</a-button
      >
      <a-button v-hasPermission="'energyCompanyAdd'" type="primary" class="filterBtn greenBtn" @click="handleUser"
        >新增企业</a-button
      >
    </a-form>
  </div>
  <div class="tableContent">
    <a-table
      :dataSource="tableData"
      :columns="columns"
      size="small"
      :scroll="{ x: 'max-content' }"
      @resizeColumn="handleResizeColumn"
      :pagination="false"
      :loading="tableLoading"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'masterAccountEnable'">
          {{ record.masterAccountEnable === 1 ? "启用" : "禁用" }}
        </template>
        <template v-if="column.key === 'handle'">
          <!-- 这期不做
          <a-popconfirm
            ok-text="确认"
            cancel-text="取消"
            @confirm="confirmMerge(record)"
          >
            <template #title> 是否将该企业的多个电站的结算数据合并? </template>
            <a-button type="link">结算数据合并</a-button>
          </a-popconfirm> -->

          <a-button v-hasPermission="'energyCompanyAccount'" type="link" @click="handleAccount(record)"
            >账号管理</a-button
          >
          <a-button v-hasPermission="'energyCompanyRemark'" type="link" @click="handleRemark(record)">备注</a-button>
        </template>
      </template>
    </a-table>
    <a-pagination
      v-model:current="filterForm.current"
      v-model:page-size="filterForm.size"
      :total="total"
      position="bottomRight"
      show-size-changer
      @change="getCompageList"
      :show-total="(total) => `总共 ${total} 条`"
    >
      <template #buildOptionText="props">
        <span>{{ props.value }}条/页</span>
      </template>
    </a-pagination>
  </div>

  <!-- 新增企业 -->
  <AddCompany
    :addCompanyVisible="addCompanyVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:addCompanyVisible="addCompanyVisible = $event"
    @getCompageList="getCompageList"
  />
  <!-- 账号管理 -->
  <AccountManage
    :accountManageVisible="accountManageVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:accountManageVisible="accountManageVisible = $event"
    @getCompageList="getCompageList"
  />
  <!-- 备注 -->
  <AddRemark
    :addRemarkVisible="addRemarkVisible"
    :isEdit="isEdit"
    :rowData="rowData"
    @update:addRemarkVisible="addRemarkVisible = $event"
    @getCompageList="getCompageList"
  />
</template>
<script setup>


import AddCompany from "./conpoments/addCompany.vue";
import AccountManage from "./conpoments/accountManage.vue";
import AddRemark from "./conpoments/addRemark.vue";
const $api = inject("$api");
const filterForm = ref({
  projectName: null,
  provId: null,
  cityId: null,
  isMulti: null,
  size: 10,
  current: 1,
});
const total = ref();
const addCompanyVisible = ref(false);
const accountManageVisible = ref(false);
const addRemarkVisible = ref(false);
const tableData = ref([]);
const isEdit = ref(false);
const rowData = ref({});
const tableLoading = ref(false);
const columns = ref([
  {
    title: "企业名称",
    dataIndex: "projectName",
    key: "projectName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "省份",
    dataIndex: "provName",
    key: "provName",
    width: 200,
    resizable: true,
    align: "center",
  },
  {
    title: "城市",
    dataIndex: "cityName",
    key: "cityName",
    width: 150,
    resizable: true,
    align: "center",
  },
  {
    title: "关联电站数量",
    dataIndex: "stationNum",
    key: "stationNum",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "企业主账号",
    dataIndex: "masterAccount",
    key: "masterAccount",
    width: 180,
    resizable: true,
    align: "center",
  },
  {
    title: "账号状态",
    dataIndex: "masterAccountEnable",
    key: "masterAccountEnable",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "备注",
    dataIndex: "remark",
    key: "remark",
    width: 160,
    resizable: true,
    align: "center",
  },
  {
    title: "子账号数量",
    dataIndex: "childAccountNum",
    key: "childAccountNum",
    width: 120,
    resizable: true,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 160,
    resizable: true,
    align: "center",
    fixed: "right",
  },
]);
function handleResizeColumn(w, col) {
  col.width = w;
}
const handleCompany = () => {
  isEdit.value = false;
  addCompanyVisible.value = true;
};
const confirmDel = async (data) => {
  const res = await $api.userDel(data.id);
  if (res && res.code === 0) {
    message.success("删除成功");
    getUserList();
  }
};
const handleUser = () => {
  isEdit.value = false;
  addCompanyVisible.value = true;
};
const handleEdit = async (data) => {
  rowData.value = data;
  isEdit.value = true;
  addCompanyVisible.value = true;
};

const getCompageList = async () => {
  const { current, size, ...rest } = filterForm.value;
  tableLoading.value = true;
  const res = await $api.companyPage(rest, current, size);
  tableLoading.value = false;
  if (res && res.code === 0) {
    tableData.value = res.data.records;
    total.value = res.data.total;
  }
};
const confirmHandleModelStatus = async (data) => {
  const params = {
    id: data.id,
    enable: data.status === 1 ? 0 : 1,
  };
  const res = await $api.userUpdate(params, "put");
  if (res && res.code === 0) {
    message.success("状态更新成功");
    getCompageList();
  }
};
const handleAccount = (data) => {
  rowData.value = data;
  accountManageVisible.value = true;
};

const provList = ref([]);
const cityList = ref([]);
const getBaseProvinceTree = async () => {
  const res = await $api.baseProvinceTree();
  provList.value = res.data;
};
const changeProv = async (id) => {
  filterForm.value.cityId = null;
  filterForm.value.countyId = null;
  cityList.value = [];
  const res = await $api.baseCityTree(id);
  cityList.value = res.data;
};
const handleRemark = (data) => {
  rowData.value = data;
  addRemarkVisible.value = true;
};
const confirmMerge = async (data) => {};
onMounted(async () => {
  getCompageList();
  getBaseProvinceTree();
});
</script>

<style lang="less" scoped>
.ant-table {
  .ant-btn {
    padding: 4px 5px;
  }
}
.formInput {
  width: 155px;
}
.filterBtn {
  margin: 0 20px 20px 0;
  &:last-child {
    margin-right: 0;
  }
}
.tableContent {
  border-radius: 4px;
  background-color: #141414;
  padding: 8px;
}
</style>